@import 'styles/variables'

.form__button
  width: 100%
  max-width: 325px
  padding-inline: 15px
  border: 1px solid transparent
  border-radius: 5px

  font-size: 24px
  font-weight: 700
  text-align: center
  word-break: normal

  cursor: pointer
  transition-duration: 0.3s

  &:disabled
    background: $grey-2
    border-color: $grey-2
    cursor: auto

  &:hover:not(:disabled)
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)

  &_size
    &_s
      height: 40px

    &_m
      height: 52px

    &_l
      height: 60px

  &_style
    &_colored
      color: $white
      background-color: $orange-1

      &:not(:disabled):active
        border-color: $orange-1
        background-color: $white
        color: $orange-1

    &_transparent-light
      border-color: $white
      color: $white
      background-color: transparent

      &:not(:disabled)
        &:active
          background-color: $white
          color: $grey-dark-2
        &:hover:not(:active)
          border-color: $orange-pale-3
          background-color: $orange-pale-3
          color: $grey-dark-2

    &_transparent-dark
      border: 1px solid $grey-dark-3
      color: $grey-dark-3

      &:not(:disabled)
        &:active
          background: $orange-1
          border-color: $orange-1
          color: $grey-dark-2
        &:hover:not(:active)
          color: $orange-1
